<template>
  <blank-layout>
    <div class="login-box">
      <!-- 欢迎界面 -->
      <div class="login-welcome" v-if="!showLoginIndex">
        <!-- @click它是组件的自定义事件，click是可以添加修饰符--原生native -->
        <van-circle
          v-model="currentRate"
          :rate="100"
          size="40px"
          :stroke-width="60"
          :clockwise="false"
          color="#ff5b02"
          :text="Math.ceil(currentRate / 20) + 's'"
        />
        <span class="jumpWelcome" @click="closeTimer">跳过</span>
        <span class="title">夕雨智能采购系统</span>
        <span class="monthSentence">{{ msgText }}</span>
      </div>

      <!-- 登录界面 -->
      <div class="login-index" v-else>
        <span class="title">夕雨智能采购系统</span>
        <div class="line">
          <input
            type="text"
            placeholder="请输入电话号码..."
            v-model="loginObj.phone"
          />
        </div>
        <div class="line vdt">
          <input
            type="text"
            placeholder="请输入验证码..."
            v-model="loginObj.vdtCode"
          />
          <span class="getVdtCode" @click="getVdtCode">{{ vdtText }}</span>
        </div>
        <van-checkbox v-model="remenberPhone" checked-color="#ff5b02"
          >是否记住手机号</van-checkbox
        >
        <van-checkbox v-model="autoLogin" checked-color="#ff5b02"
          >是否免登陆</van-checkbox
        >
        <div class="btn-box">
          <van-button class="indexBut" color="#ff5b02" @click="butEvt"
            >登录</van-button
          >
          <van-button
            class="indexBut"
            color="#ff5b02"
            @click="$router.push('/register')"
            >注册</van-button
          >
        </div>
      </div>

      <!-- 页脚文件 -->
      <span class="footer">designed by mengxia.jing &copy; 2021</span>
    </div>
  </blank-layout>
</template>

<script>
import {
  getVdtCodeApi,
  loginApi,
  userInfoApi,
  autoLoginApi,
} from "../../apis/LoginApi";

import { AES, enc } from "./crypto-js";

export default {
  data() {
    return {
      // 倒计时当前进度
      currentRate: 100,
      // 是否展示登录界面首页
      showLoginIndex: false,
      // 是否记住电话号码
      remenberPhone: false,
      // 加载状态
      autoflag: "loading",
      // 是否免登录
      autoLogin: false,
      // 欢迎界面月份句子
      msgText: [
        "一月，我听到了爆竹的声声催促",
        "二月，我闻到了腊梅的缕缕幽香",
        "三月，我看到了桃花绚烂如云霞",
        "四月，我躺在了柳阴中酣然入梦",
        "五月，我品尝着晶莹剔透的樱桃",
        "六月，我观赏水莲花的绰约芳姿",
        "七月，我跃入那清波荡漾的碧水",
        "八月，置身于桂花雨中翩然起舞",
        "九月，我漫步在飘满落叶的小径",
        "十月，我欣然采摘那累累的硕果",
        "十一月，我聆听冬天走来的步履",
        "十二月，我掬起一捧洁白的雪花",
      ][new Date().getMonth()],
      loginObj: {
        phone: "",
        vdtCode: "",
      },
      // 倒计时器
      timer: null,
      // 验证码文字
      vdtText: "获取验证码",
    };
  },
  created() {
    // 倒计时
    this.loopTimer();
    // 是否免登录
    this.autoLoginEvt();
  },
  methods: {
    // 欢迎界面倒计时
    loopTimer() {
      this.timer = setTimeout(() => {
        this.currentRate -= 1;
        if (this.currentRate > 0) {
          this.loopTimer();
        } else {
          if (this.autoflag === "home") {
            this.$router.push("/home");
            return;
          }
          this.showLoginIndex = true;
        }
      }, 50);
    },

    // 为防止用户在一段时间内多次点击，采用节流机制
    async getVdtCode() {
      // 当验证码按钮的文字不是获取验证码时不可点击
      if (this.vdtText !== "获取验证码") return;
      // 当在获取验证码阶段，先要判断号码输入是否正确
      if (!/^1[3-9]{1}[0-9]{9}$/.test(this.loginObj.phone)) {
        this.$toast.fail("手机号码输入错误");
        this.loginObj.phone = "";
        return;
      }
      // 如果手机号码输入正确
      this.vdtText = "获取中...";
      let result = await getVdtCodeApi(this.loginObj.phone);
      if (result.code !== 200) {
        this.$toast.fail("获取验证码失败");
        this.vdtText = "获取验证码";
        return;
      }
      this.$toast.success("验证码:" + result.data.vdtCode);
      this.loopVdtTimer(Date.now());
    },

    closeTimer() {
      // 判断autoflag的值，进行相应处理
      if (this.autoflag === "loading") return;
      if (this.autoflag === "home") {
        this.$router.push("/home");
      } else {
        this.showLoginIndex = true;
      }
      clearTimeout(this.timer);
    },

    async autoLoginEvt() {
      // 获取免登录标识
      let flag = localStorage.getItem("auto-token");
      if (!!flag) {
        // 将token缓存到vuex
        this.$store.commit("common/setToken", flag);
        let result = await autoLoginApi();
        console.log(result);
        if (result.code === 200) {
          this.$store.commit("common/setUserInfo", result.data);
          // 倒计时还在继续执行，不可以直接跳转，不然欢迎界面没有用了
          this.autoflag = "home";
        } else {
          // 免登录失败，检查是否勾选了记住电话号码
          let remember = localStorage.getItem("remember-phone");
          if (!!remember) {
            this.loginObj.phone = AES.decrypt(remember, "mengxiajing").toString(
              enc.Utf8
            );
            this.remenberPhone = true;
          }
          this.autoflag = "login";
        }
      } else {
        // 判断用户是否勾选了记住手机号
        let remember = localStorage.getItem("remember-phone");
        if (!!remember) {
          this.loginObj.phone = AES.decrypt(remember, "mengxiajing").toString(
            enc.Utf8
          );
          this.remenberPhone = true;
        }
        this.autoflag = "login";
      }
    },

    // 获取验证码倒计时，使用递归
    loopVdtTimer(ptime) {
      setTimeout(() => {
        // 计算还剩下多少秒
        let _pt = 6 - Math.ceil((Date.now() - ptime) / 1000);
        if (_pt > 0) {
          this.vdtText = `重新获取(${_pt}s)`;
          this.loopVdtTimer(ptime);
        } else {
          this.vdtText = "获取验证码";
        }
      }, 200);
    },

    async butEvt() {
      // 校验用户输入的电话号码是否正确
      if (!/^1[3-9]{1}[0-9]{9}$/.test(this.loginObj.phone)) {
        this.$toast.fail("电话号码输入错误");
        return;
      }
      // 校验用户输入的验证码是否正确
      if (!/^[0-9]{4}$/.test(this.loginObj.vdtCode)) {
        this.$toast.fail("验证码输入错误");
        return;
      }
      // 都通过则调用接口
      // 使用加载中。防止用户二次点击
      this.$toast.loading({
        message: "登录中...",
        forbidClick: true,
        duration: 0,
      });
      // 调用接口获取数据
      let result = await loginApi(this.loginObj);
      // code!==200,登录失败
      if (result.code !== 200) {
        this.$toast.fail("登录失败，请重试!");
        this.$toast.clear();
        return;
      }
      // 获取用户信息接口需要使用到token，所以将token存到vuex中
      this.$store.commit("common/setToken", result.data.token);
      let userInfo = await userInfoApi(result.data.id);
      // 因为一直需要用户的信息，则把用户数据存到vuex中
      this.$store.commit("common/setUserInfo", userInfo.data);
      // 判断用户是否勾选了记住电话号码
      if (this.remenberPhone) {
        // 如果用户勾选了，则将用户进行加密处理在存到本地
        localStorage.setItem(
          "remember-phone",
          AES.encrypt(this.loginObj.phone, "mengxiajing").toString()
        );
      } else {
        // 移除
        localStorage.removeItem("remember-phone");
      }
      // 判断用户是否勾选了免登录
      if (this.autoLogin) {
        localStorage.setItem("auto-token", this.loginObj.vdtCode);
      } else {
        // 移除
        localStorage.removeItem("auto-token");
      }
      // 关闭加载框
      this.$toast.clear();
      // 将数据存到vuex中
      this.$store.dispatch("common/userRightsAct", userInfo.data.role);
      // 页面跳转
      this.$router.push("/home");
    },
  },
};
</script>
<style lang="less" scoped>
// 引入样式表
@import "./index.less";
</style>